<!-- 回传记录 -->
<!-- 回传记录 -->
<template>
  <el-dialog v-model="dialogVisible" width="85%" title="回传记录" draggable appendToBody destroyOnClose lockScroll :closeOnClickModal="false">
    <base-skeleton v-if="pageLoad.loadState === true" style="width: 100%; height: 100%; min-height: 400px; padding: 0 20px"></base-skeleton>
    <div v-else-if="pageLoad.loadState === false" class="content-wrap" style="min-height: 500px">
      <div>
        <base-date-picker
          v-model="filterData.filterDate"
          valueFormat="YYYY-MM-DD"
          format="YYYY-MM-DD"
          placeholder="请选择回传日期"
          type="date"
          clearable
          @change="getBaseDataAxios"
        ></base-date-picker>
      </div>
      <div class="table">
        <el-table v-loading="baseData.loading" max-height="50vh" border :data="list" showOverflowTooltip stripe style="width: 100%">
          <el-table-column
            fixed
            type="index"
            :index="(index: number) => (filterData.current - 1) * filterData.size + index + 1"
            label="编号"
            sortable
            width="60"
            align="center"
            headerAlign="center"
          ></el-table-column>
          <el-table-column label="订单编号" prop="outTradeNo" minWidth="230"></el-table-column>
          <el-table-column label="短剧" prop="" minWidth="200">
            <template #default="{ row }">
              <div>
                <p>
                  短剧ID:
                  <span class="highlighted">{{ row.dramaId }}</span>
                </p>
                <p>
                  短剧名称:
                  <span class="highlighted">{{ row.dramaTitle }}</span>
                </p>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="系统平台" prop="devicePlatform" width="90">
            <template #default="{ row }">
              <el-tag v-if="row.devicePlatform === 'android'" key="el-tag-1" type="success" size="small">安卓</el-tag>
              <el-tag v-else-if="row.devicePlatform === 'ios'" key="el-tag-2" type="danger" size="small">苹果</el-tag>
              <span v-else></span>
            </template>
          </el-table-column>
          <el-table-column label="小程序平台" prop="platform" minWidth="100">
            <template #default="{ row }">
              <el-tag v-if="row.platform === 'mp-kuaishou'" key="el-tag-1" size="small">快手</el-tag>
              <el-tag v-else-if="row.platform === 'mp-toutiao'" key="el-tag-2" type="warning" size="small">抖音</el-tag>
              <el-tag v-else-if="row.platform === 'mp-weixin'" key="el-tag-3" type="success" size="small">微信</el-tag>
              <el-tag v-else key="el-tag-4" type="danger" size="small">未知</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="小程序名称" prop="appName" width="120"></el-table-column>
          <el-table-column label="付费金额" prop="totalAmount" minWidth="110">
            <template #default="{ row }">
              {{ formatNumberWithMoney(row.totalAmount) }}
            </template>
          </el-table-column>
          <el-table-column label="付费类型" prop="productType" minWidth="110">
            <template #default="{ row }">
              {{ payCategory.find((v) => v.value === row.productType)?.label || '-' }}
            </template>
          </el-table-column>
          <el-table-column label="支付方式" prop="payChannel" width="120">
            <template #default="{ row }">
              {{ payType.find((v) => v.value === row.payChannel)?.label || '-' }}
            </template>
          </el-table-column>
          <el-table-column label="解锁集数" prop="episodeSeq" minWidth="110"></el-table-column>
          <el-table-column label="是否回传" prop="reportStatus" minWidth="110"></el-table-column>
          <el-table-column label="回传时间" prop="reportStatus" minWidth="110">
            <template #default="{ row }">
              <p>{{ row.createTime?.split('T')?.[0] }}</p>
              <p>{{ row.createTime?.split('T')?.[1] }}</p>
            </template>
          </el-table-column>
          <el-table-column label="备注" prop="remark" minWidth="110"></el-table-column>
        </el-table>
      </div>
      <div class="pagination-box">
        <el-pagination
          v-model:currentPage="filterData.current"
          v-model:pageSize="filterData.size"
          :pageSizes="[20, 30, 40, 50]"
          :disabled="baseData.loading"
          :pagerCount="13"
          layout="total, prev, pager, next, sizes, jumper"
          :total="baseData.total"
          @change="getBaseDataAxios()"
        ></el-pagination>
      </div>
    </div>
    <base-empty
      v-else
      style="height: 100%"
      :description="pageLoad.description || ''"
      :imageSize="240"
      :loadState="pageLoad.loadState"
      :pageLoadButton="[{ text: '重新加载', callBack: getBaseDataAxios }]"
    ></base-empty>
  </el-dialog>
</template>

<script setup lang="ts">
  import { type LinkBackRecordItem, type LinkBackRecordRequest, getLinkBackRecord } from '@/api/marketing-management';
  import { formatNumberWithMoney } from '@/utils/numb';
  // const { proxy } = getCurrentInstance() as any;
  type $ShowData = {
    /** 推广链接id  */
    referralLinkId: number;
    thatdayDate: string;
  };

  const baseData = shallowReactive({
    /** 加载状态 */
    loading: false,
    /** 总数量 */
    total: 0,
  });

  const filterData = ref<LinkBackRecordRequest>({
    current: 1,
    size: 40,
    referralLinkId: '',
    filterDate: '',
  });

  const pageLoad = shallowReactive<$PageLoad>({ loadState: true, description: '' });

  const payType = ref([
    { label: '抖音', value: 'DOUYIN' },
    { label: '抖音K币', value: 'DOUYIN-DIAMOND' },
    { label: '支付宝', value: 'ALIPAY' },
    { label: '微信', value: 'WECHAT' },
    { label: '未知', value: 'UNKNOWN' },
  ]);

  const payCategory = ref([
    { 'label': '充值虚拟币', 'value': 1 },
    { 'label': '购买会员', 'value': 2 },
    { 'label': '购买剧集', 'value': 3 },
    { 'label': '购买全集', 'value': 4 },
    { 'label': '分享解锁', 'value': 11 },
    { 'label': '权益券解锁', 'value': 12 },
    { 'label': '广告解锁', 'value': 13 },
    { 'label': 'K币解锁', 'value': 10 },
  ]);

  const dialogVisible = ref(false);
  const list = ref<LinkBackRecordItem[]>([]);
  /** 请求 */
  async function getBaseDataAxios() {
    try {
      pageLoad.loadState = true;
      const res = await getLinkBackRecord({
        ...filterData.value,
        filterDate: filterData.value.filterDate ? filterData.value.filterDate : '',
      });
      list.value = res.data.records;
      baseData.total = res.data.total;
      pageLoad.loadState = false;
    } catch (error) {
      pageLoad.loadState = 'err';
      pageLoad.description = String((error as Record<string, unknown>).msg || '') || '获取数据失败';
    }
  }

  /**
   * 显示
   */
  function show(data: $ShowData) {
    filterData.value.referralLinkId = `${data.referralLinkId}`;
    // filterData.value.filterDate = proxy.$dayjs().format('YYYY-MM-DD');
    filterData.value.filterDate = data.thatdayDate;
    dialogVisible.value = true;
    getBaseDataAxios();
  }

  /**
   * 隐藏
   */
  function hide() {
    dialogVisible.value = false;
  }

  defineExpose({ show, hide });
</script>

<style lang="scss" scoped>
  .link-box {
    @include flex(row, nowrap, flex-start, center, center);
    width: 100%;
    height: 80px;
    padding: 15px;
    overflow: hidden;

    .title {
      display: inline-block;
      width: 64px;
      margin-right: 20px;
      font-size: 14px;
      text-align: left;
    }
  }

  .content-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;

    .table {
      flex: 1;
    }

    .pagination-box {
      display: flex;
      justify-content: center;
    }
  }
</style>
